<script setup lang="ts">

import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import 'echarts-liquidfill' // 引入水球图拓展插件
let number = ref('215809人');
let liquidFillRef = ref();

onMounted(() => {
  let liquidFillChart = echarts.init(liquidFillRef.value);
  liquidFillChart.setOption({
    title: {
      // text: '水球图'
    },
    series: {
      type: 'liquidFill',
      radius:'90%',
      amplitude: '8%', // 振幅
      waveLength:'80%',
      waveAnimation:true, // 是否开启水球图动画
      // To disable the animation of waves raising,
      // set animationDuration and animationDurationUpdate to be 0.
      animationDuration: 10000,  // waves raising的时间
      animationDurationUpdate: 2000, // 数据变化时raise的时间
      animationEasing: 'cubicOut', // 当波浪在开始时从底部升起时，初始动画的缓和方法。
      animationEasingUpdate: 'cubicOut',// 数据变化时，当波浪在开始时从底部升起时，初始动画的缓和方法。
      data: [0.6,0.2,0.1], // 数据
      color: ['red', '#0f0', 'rgb(0, 0, 255)'], // 每个数据对应的颜色

      // 正常时的透明度
      itemStyle: {
        opacity: 0.6
      },
      // hover时的透明度
      emphasis: {
        itemStyle: {
          opacity: 0.9
        }
      },
      backgroundStyle: {
        borderWidth: 5,
        borderColor: 'red',
        color: 'yellow',
        shadowColor: 'rgba(255,255,255,0.9)',
        shadowBlur: 10
      },
      outline: {
        show: true
      },
      shape: 'circle' // 形状
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  })
  setTimeout(function () {
  liquidFillChart.setOption({
      series: [{
        type: 'liquidFill',
        data: [0.8, 0.6, 0.4, 0.2]
      }]
    })
  }, 3000);
});


</script>

<template>
  <div class="tourist-num">
    <p class="title">实时游客统计</p>
    <p class="right">可预约总量<span>999999</span></p>
    <div class="number">
      <span v-for="(item,index) in number" :key="index">{{ item }}</span>
    </div>

    <div class="liquidFill" ref="liquidFillRef"></div>
  </div>
</template>

<style scoped lang="scss">
.tourist-num {
  flex: 1;
  margin: 10px;
  background-color: #66b1ff;
  .title {
    color: white;
    font-size: 20px;
  }

  .right {
    font-size: 20px;
    float: right;
    color: white;

    span {
      color: greenyellow;
    }
  }

  .number {
    color: #29fcff;
    display: flex;
    margin-top: 30px;
    padding: 20px;

    span {
      background-color: #1dc779aa;
      flex: 1;
      font-size: 20px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      //background: url("");
    }
  }
  .liquidFill {
    height: calc(100% - 100px);
    width: 100%;
  }
}
</style>